/* 
    一些公共的函数和功能
    ==================================
  [目录]

    1. 页面初始化，计算rem
    2. 动态插header
    3. 回到顶部
    4. 封装的常用函数
*/

/*--------------------------------------------------------------
  1. 页面初始化，计算rem
--------------------------------------------------------------*/

// 函数立即调用
(function () {
  //页面初始化，针对屏幕不是1920*1080的页面尺寸
  const buildRem = function () {
    let designSize = 1920; // 设计图尺寸            
    let html = document.documentElement;
    let wW = html.clientWidth;// 窗口宽度
    let rem = wW * 100 / designSize;
    html.style.fontSize = rem + 'px';
  }
  // 页面初始化的时候调用
  buildRem()
  // 页面缩放时调用
  window.onresize = buildRem;
  /* 
  1920                 100
  ----------    =   -----------
  你的宽（wW）        你的字体大小
*/
})();

/*--------------------------------------------------------------
  2. 动态插header
--------------------------------------------------------------*/

(function () {
  const header = document.querySelector('#header');
  const navData = [
    {
      title: "首页",
      url: "index.html",
    },
    {
      title: "作品展示",
      url: "protfolio.html",
    },
    {
      title: "博客",
      url: "blogs.html",
    },
    {
      title: "我的简历",
      url: "about.html",
    },
    {
      title: "联系我",
      url: "contact.html",
    },
  ];

  header.insertAdjacentHTML('afterbegin', `
      <div class="container flex align-items-center justify-content-between">
        <a href="./index.html"><img class="logo" src="./images/logo.png" alt=""></a>
        <nav id="navbar" class="navbar">
          <ul>${insertNav()}</ul>
        </nav>
      </div>
    `)

    function insertNav () {
    let res = ''
    navData.forEach(nav => {
      res += `<li class="${getPageName() == nav.url ? 'active' : ''}"><a href="${nav.url}">${nav.title}</a></li>`
    })
    return res
  }

  function getPageName() {
    const pathArr = location.pathname.split('/')
    return pathArr[pathArr.length - 1]
  }
}
)();

/*--------------------------------------------------------------
  3.动态插入footer
--------------------------------------------------------------*/
(function () {
  const footer = document.querySelector('#footer')
  footer.insertAdjacentHTML('beforeend', `
  <span>© Copyright wyc. All Rights Reserved</span>
  `)
})();

/*--------------------------------------------------------------
  4.封装一些函数
--------------------------------------------------------------*/
(function (global) {
  global = global || self;

  const baseUrl = "http://81.70.162.221:3000";
  axios.defaults.baseURL = baseUrl;

  global.imgUrl = function (url) {
    return baseUrl + "/" + url;
  };

  global.getQueryString = function (name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  };
})(window);

/*--------------------------------------------------------------
  5.回到顶部
--------------------------------------------------------------*/
(function () {
  // 创建元素
  const backtotop = document.createElement("a");
  backtotop.className = "back-to-top";
  backtotop.href = "javascript:;";
  backtotop.innerHTML = `<svg t="1659855064677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3072" width="24" height="24"><path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" p-id="3073" fill="#ffffff"></path></svg>`;
  document.body.appendChild(backtotop);

  // 滚动处理
  backtotop.addEventListener(
    "click",
    function () {
      document.documentElement.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    false
  );

  // 控制显示隐藏
  document.addEventListener("scroll", function () {
    if (window.scrollY > 100) {
      backtotop.classList.add("active");
    } else {
      backtotop.classList.remove("active");
    }
  });
})();